<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'>
		<title>Super Nancy's Blog</title>
		<link rel="stylesheet" href="styles/bootstrap.css">
		<link rel="stylesheet" href="styles/swiper.min.css">
		<link rel="stylesheet" href="styles/index.css">
		<link rel="stylesheet" href="styles/public.css">
		<style></style>
	</head>
	<body>
	<!--影响文字可读性：-->
	<!--1，把文字设为白色，加阴影-->
	<!--2，加透明黑背景，字体设为白色-->
	<!--3，毛玻璃效果-->
	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
			<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navigation'>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
				<a href="" class='navbar-brand'>
					<img src="images/logo2.png" alt="">
					<h3>Super Nancy</h3>
				</a>
			</div>
			<div class='collapse navbar-collapse' id='navigation'>
				<ul class='nav navbar-nav navbar-right'>
					<li class='active'><a href="">Home</a></li>
					<li><a href="">Exhibition</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<section class='banner'>
		<div class="swiper-container">
			<div class='swiper-wrapper' id='hot-wrapper'>
				<div class="swiper-slide first">
					<div class="caption">
						<div class="intro">
							<h1>Welcome!</h1>
							<h3>Web Front-end Development</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-button-prev swiper-button-white"></div>
			<div class="swiper-button-next swiper-button-white"></div>
			<div class="swiper-pagination"></div>
		</div>
	</section>
	<section class="preview">
		<h1>Introduction</h1>
		<h4>WebApp,JS plugins,jQuery...</h4>
		<div class="container">
			<div class="row" id="article-wrapper">
				<div class='loading'>
					<div class="loading-body">
						<span class='cube1'></span>
						<span class='cube2'></span>
					</div>
					<h2>Loading...</h2>
				</div>
			</div>
		</div>
	</section>
	<footer>
		<div class="container">
			<p>&copy;Copyright 2016-2017 Nancy.com</p>
			<a href="">
				<div class="qrcode">
					<img src="images/qrcode.png" alt="qrcode">
				</div>
			</a>
		</div>
	</footer>
	<script id="articles" type="text/html">
		{{each articles}}
			<div class="col-xs-12 col-sm-6 col-md-4 article-one">
				<div class="pre" style="background-image:url('images/{{$value.art_img}}');"></div>
				<h3>{{$value.art_title}}</h3>
				<p class="article-main">{{$value.art_content}}</p>
				<a href="blog.html?a={{$value.art_id}}" class="btn btn-info">Details</a> 
			</div>
		{{/each}}
		</script>
		<script id="hot" type="text/html">
			<div class="swiper-slide" style="background-image:url('images/{{art_img}}');">
					<div class="caption">
						<div class="intro">
							<h1>{{art_title}}</h1>
							<h3>Impression Changsha</h3>
						</div>
						<a href='blog.html?a={{art_id}}'>View More > </a>
					</div>
				</div>
		</script>
		<script src='scripts/jquery.js'></script>
		<script src='scripts/bootstrap.js'></script>
		<script src='scripts/swiper.min.js'></script>
		<script src='scripts/template.js'></script><!--ajax 模板引擎-->
		<script src='scripts/jquery.dotdotdot.js'></script><!--插件不能超过10个 文本溢出 -->
		<script>
			$(document).ready(function () {//准备工作不能忘	
			var html;
			$.get('http://plrabbit.com/home/api.php', {
				m: 'article',
				a: 'list'
			}).done(function (data) {
				console.log(data);
				$.each(data.articles, function(i,e){
					if(e.art_ishot == '1'){
						var hot = template('hot', e);
						$('#hot-wrapper').append(hot);
					}
				});
				new Swiper('.swiper-container',{
					direction:'horizontal',
					loop:true,
					speed:800,
					autoplay:2000,
					effect:'fade',
					pagination:'.swiper-pagination',
					//autoplayDisableOnInteraction: false,
					prevButton:'.swiper-button-prev',
					nextButton:'.swiper-button-next'
				});
				html = template('articles',data);
				$('.preview').show();
				$('.loading').hide(1000);
				$('#article-wrapper').html(html);
				$('.article-main').dotdotdot();
			});
			window.onresize=function(){
				$('#article-wrapper').html(html);
				$('.article-main').dotdotdot();
			}
		});
	</script>
	</body> 
</html>